<template>
	<view class="container">
		<u-navbar title-color='#fff' back-icon-color='#fff'
		  height='110'
		 title="食材分类" :background="background"
			:border-bottom='false'>
			<view class="top slot-wrap">
				<view class="tab-change">
					<u-subsection :list="list" :current="curNow" bg-color='rgba(238,129,49,0)' inactive-color='white'
						@change="sectionChange"></u-subsection>
				</view>
				<view class="search">
					<u-search placeholder="共有9999道菜" shape='square' height="74" bg-color='white' input-align="center"
						:show-action="false" v-model="keyword"></u-search>
				</view>
			</view>
		</u-navbar>

		<view class="content">
			<swiper class="list-swiper" :current="curNow" duration="300" @change="swiperTab">
				<swiper-item>
					<categoryList />
				</swiper-item>
				<swiper-item>
					222
				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					// background: 'url(../../static/image/index/ditu%20.png) no-repeat'
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					backgroundImage: 'linear-gradient(45deg,  rgb(238,129,49), rgb(240,153,55))'
				},
				keyword: '',
				list: [
					{ name: '分类' },
					{ name: '食材' }
				],
				curNow: 0

			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index
			},
			swiperTab(e) {
				this.curNow = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.top {
			height: 180rpx;
			width: 750rpx;
			background: linear-gradient(45deg, rgb(238, 129, 49), rgb(240, 153, 55));
			position: fixed;
			top: 206rpx;
			// bottom: 0;
			right: 0;
			z-index: 99;

			.tab-change {
				width: 378rpx;
				margin: 0 auto;
				border: 1rpx solid white;
				border-radius: 15rpx;

			}

			.search {
				margin-top: 17rpx;
				width: 692rpx;
				// left: 50%;
				margin-left: 32rpx;
			}
		}



		.content {
			margin-top: 130rpx;
			.list-swiper {
				height: calc(100vh - 120rpx);

				// swiper-item {
				// 	height: ;
				// }
			}
		}

	}
</style>
